<%--
  Created by IntelliJ IDEA.
  User: 70481
  Date: 2019/8/29
  Time: 20:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>图书列表</title>
    <link href="layui/css/layui.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="layui/layui.js"></script>
    <script>
        layui.use(["table","form","layer"],function(){
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;

            //表单初始化
            table.render({
                elem:"#myTable",
                url:"selectAll",
                page:true,
                even:true,
                toolbar:"#myDiv",
                cols:[[
                    /*每一行是一个列*/
                    {checkbox:true},
                    {"title":"编号","field":"bookId"},
                    {"title":"书名","field":"bookName"},
                    {"title":"作者","field":"author"},
                    {"title":"出版社","field":"press"},
                    {"title":"价格","field":"bookPrice"},
                    {"title":"操作",toolbar:"#myOperation"}
                ]]
            })

            /*submit监听*/
            form.on("submit(formDemo)",function(data){
                alert("添加")
                $.ajax({
                    url:"insertBook",
                    data:data.field,
                    success:function(data){
                        layer.alert(data.isInsert,{time:1250})
                        layer.closeAll("page")
                        // 刷新table
                        table.reload("myTable")
                    }
                })
                return false;
            })


            /*toolbar监听*/
            table.on("tool(myTable)",function(obj){
                // alert(123)
                var layevent = obj.event;
                var params = obj.data;
                // alert(layevent)
                console.log(params)

                if("updateBook" == layevent){
                    addlayer()
                    //修改
                    form.val("myForm",{
                        "bookId":params.bookId,
                        "bookName":params.bookName,
                        "author":params.author,
                        "press":params.press,
                        "bookPrice":params.bookPrice
                    })

                    form.on("submit(formDemo)",function(data){
                        alert("修改")
                        //发送ajsx请求  修改
                        $.ajax({
                            url:"updateBook",
                            data:data.field,
                            success:function(data){
                                layer.alert(data.isUpdate,{time:1250})
                                layer.closeAll("page")
                                table.reload("myTable")
                                $("#myForm")[0].reset()
                            }
                        })
                        return false;
                    })
                }else{
                    //删除
                    $.ajax({
                        url:"deleteBook",
                        data:{"bookId":params.bookId},
                        success:function(data){
                            layer.alert(data.isDelete,{time:1250})
                            table.reload("myTable")
                        }
                    })
                }
            })
        })

        /*弹出层*/
        function addlayer (){
            var form = layui.form;
            $("#myForm")[0].reset()
            layer.open({
                type:1,
                offset:"t",
                content:$("#myForm")
            })
        }

        function cearchBook(){
            // 获取输入框中的值
            var params = $("#bookName").val()
            alert(params)

            var table = layui.table;
            table.reload("myTable",{
                url:"selectAll",
                where:{"name":params}
            })
        }

    </script>

</head>
<body>
<%--我的table--%>
<table id="myTable" lay-filter = "myTable"></table>
<script type="text/html" id="myOperation">
    <%--    <button type="button" class="layui-btn layui-btn-radius layui-btn-norma layui-btn-sm">查看</button>--%>
    <button type="button" class="layui-btn layui-btn-radius layui-btn-warm layui-btn-sm" lay-event="updateBook" id="update">修改</button>
    <button type="button" class="layui-btn layui-btn-radius layui-btn-danger layui-btn-sm"lay-event="deleteBook" id="delete">删除</button>
</script>

<div id="myDiv" style="display: none">

    <button type="button" class="layui-btn layui-btn-radius layui-btn-normal layui-btn-sm" onclick="addlayer()"><i class="layui-icon layui-icon-add-circle"></i>添加</button>
    <button type="button" class="layui-btn layui-btn-radius layui-btn-danger layui-btn-sm" onclick="batchDelete()"><i class="layui-icon layui-icon-delete"></i>批量删除</button>


    <div class="layui-inline">
        <label class="layui-form-label">书名</label>
        <div class="layui-input-inline" style="width: 200px;">
            <input type="text" class="layui-input" id="bookName">
        </div>

        <div class="layui-input-inline" style="width: 100px;">
            <button type="button" class="layui-btn layui-btn-radius layui-btn-sm" onclick="cearchBook()"><i class="layui-icon layui-icon-search"></i>搜索</button>
        </div>
    </div>

</div>

<%--我的表单--%>
<form class="layui-form" action="" id="myForm" lay-filter="myForm" style="display: none">
    <input type="hidden" name="bookId">
    <div class="layui-form-item">
        <label class="layui-form-label">书名</label>
        <div class="layui-input-block">
            <input type="text" name="bookName" required  lay-verify="required" placeholder="请输入书名" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">作者</label>
        <div class="layui-input-block">
            <input type="text" name="author" required  lay-verify="required" placeholder="请输入作者" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">出版社</label>
        <div class="layui-input-block">
            <input type="text" name="press" required  lay-verify="required" placeholder="请输入出版社" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">价格</label>
        <div class="layui-input-block">
            <input type="text" name="bookPrice" required  lay-verify="required" placeholder="请输入价格" autocomplete="off" class="layui-input">
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
</body>
</html>
